.my-page{
    .my-main{
        .my-header-wrap{
            margin-bottom: 15px;
            // padding: 10px;
            background-color: #fff;
            .my-header{
                overflow: hidden;
                position: relative;
                // border-radius: 6px;
                font-size: 12px;
                color: #fff;
                background: linear-gradient(90deg,#eb3c3c,#ff7459);
                box-shadow: 0 2px 5px rgba(255,98,98,.4);
                .my-section{
                    background:transparent;
                    margin-bottom:0;
                    .my-assets{
                        a{
                            b{
                                line-height:20px;
                                height:20px;
                                color:#fff;
                            }
                            span{
                                color:#fff;
                                padding-top:5px;
                            }
                            padding:0;
                            margin:10px 0;
                        }
                        a:nth-child(n+2){
                            border-left:1px solid #fff;  
                        }
                    }
                }
                .my-header-main{
                    display: flex;
                    position: relative;
                    -webkit-box-align: center;
                    align-items: center;
                    padding: 25px 15px 0px 15px;
                    .my-header-avatar{
                        position: relative;
                        margin-right: 10px;
                        width: 60px;
                        height: 60px;
                        border: 1px solid hsla(0,0%,100%,.4);
                        border-radius: 60px;
                        box-shadow: 0 2px 10px rgba(0,0,0,.15);
                        .my-header-avatar-img{
                            overflow: hidden;
                            border-radius: 60px;
                            padding-top: 100%;
                            img{
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                border-radius: 60px;
                            }
                        }
                    }
                    .my-header-msg{
                        flex: 1;
                        min-width: 0;
                        .name{
                            position: relative;
                            font-size: 14px;
                            margin-right: 20px;
                            white-space: nowrap;
                        }
                        .pin{
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            margin-top: 3px;
                            color: hsla(0,0%,100%,.7);
                        }
                    }
                    .setting{
                        position: absolute;
                        top: 12px;
                        right: 15px;
                        padding-left: 18px;
                        color: #fff;
                        background-size: 13px;
                    }
                }
            }
        }
        .my-section {
            position: relative;
            margin: 15px 0;
            background: #fff;
            .my-order,.my-assets{
                display: flex;
                a{
                    display: block;
                    flex: 1;
                    position: relative;
                    padding: 16px 0 11px;
                    text-align: center;
                    img{
                        display: block;
                        width:20px;
                        margin:0 auto;
                    }
                    span{
                        display: block;
                        position: relative;
                        flex: 1;
                        padding: 10px 0 2px;
                        text-align: center;
                        font-size: 12px;
                        color: #666;
                        background: no-repeat center 16px;
                        background-size: 20px;
                    }
                }
                .type-orders{
                    &::before{
                        content: "";
                        z-index: 1;
                        position: absolute;
                        top: 0;
                        left: -5px;
                        width: 10px;
                        height: 72px;
                        background: url(../images/order-left.png);
                        background-size: 10px;
                    }
                }
                
            }
            .my-assets{
                a{
                    b{
                        font-weight: 400;
                        color:#e4393c;
                        font-size:12px;
                    }
                }
            }
            .my-more{
                overflow: hidden;
                a{
                    width:50%;
                    padding:0 0px 0 20px;
                    display: block;
                    box-sizing: border-box;
                    float:left;
                    position: relative;
                    border-bottom: 1px solid #eee;
                    img{
                        width:50px;
                        height:50px;
                        display: block;
                        border-radius:50px;
                        position: absolute;
                        top:15px;
                        left:20px;
                    }
                    span{
                        margin:15px 0;
                        margin-left:60px;
                        display: block;
                        height:50px;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                        p{
                            margin:0;
                            padding:0;
                            color:#999;
                            font-size:12px;
                        }
                    }
                }
                a:nth-child(2n+1){
                    border-right: 1px solid #eee;
                }
                a:nth-last-child(1),a:nth-last-child(2){
                    border-bottom:0;
                }
            }
            .item{
                position: relative;
                display: block;
                height: 45px;
                line-height: 45px;
                font-size: 14px;
                padding: 0 10px;
                color:#555;
                &::after{
                    content: "";
                    display: inline-block;
                    vertical-align: middle;
                    margin-top: -2px;
                    width: 12px;
                    height: 12px;
                    background-image: url(../images/next.png);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    position: absolute;
                    right: 10px;
                    top: 50%;
                    margin-top: -6px;
                }
            }
            .item:nth-child(n+1){
                border-top: 1px solid #eee;
            }
            .item_noleft{
                position: relative;
                display: block;
                height: 45px;
                line-height: 45px;
                font-size: 14px;
                padding: 0 10px;
                color:#555;
            }
        }
    }
}